<template>
	<view class="container pre-hover" hover-class="hover-scale" :hover-start-time="0">
		<view class="list-item pre-hover" hover-class="hover-scale" @tap="navigateTo('product.ticket.detail', { id: item.id })">
			<view class="img-box">
				<image :src="item.couponThumbnail || ''" mode="aspectFill" class="image"
					:class="{ sellClear: item.remainCount == 0, isOvered: item.isOvered }"></image>
				<view class="topRightBox flex_row_c_c">
					<text class="QS-text mini-xx color_ffffff display_block"
						style="line-height: 24rpx;">已抢{{item.saleCount || 0}}</text>
				</view>
			</view>
			<view class="bot-box">
				<!-- <view style="min-height: 86rpx;"> -->
					<view class="text-overflow_ellipsis_line_2">
						<!-- <text class="QS-text mini-xxxx"
							style="border: 1px solid #FFA600;border-radius: 4rpx;padding: 4rpx 10rpx;float: left;margin-top: 3rpx;color: #FFA600;">
							{{item.discount || ''}}折扣
						</text> -->
						
						<!-- <view
					class="flex_row_c_c"
					style="border: 1px solid #FFA600;border-radius: 4rpx;padding: 4rpx 10rpx;float: left;margin-top: 3rpx;">
						<text 
						class="QS-text mini-xxxx"
						style="color: #FFA600;">{{item.discount || ''}}折扣</text>
					</view> -->
					
						<!-- <text style="opacity: 0;">1</text> -->
						<text class="name">{{item.name || ''}}</text>
					</view>
				<!-- </view> -->
				<!-- <text class="text-overflow_ellipsis_line_2"><text 
				class="QS-text mini-xxxx"
				style="color: #FFA600;padding: 3rpx 5rpx;border: 1px solid #FFA600;border-radius: 4rpx;">{{item.discount || ''}}折扣</text><text class="name">{{item.name || ''}}</text></text> -->
				<!-- <span class="flex_row">
					<view class="flex_row_c_c"
						style="border: 1px solid #FFA600;border-radius: 4rpx;padding: 3rpx 5rpx;">
						<text class="QS-text mini-xxxx"
							style="color: #FFA600;">{{item.discount || ''}}折扣</text>
					</view>
					<text class="name">{{item.name || ''}}</text>
				</span> -->
				<QS-P height="10px"></QS-P>
				<view class="bot-btns-box">
					<view class="left">
						<view class="text-tabel-cell-bottom" v-if="item.paySalePrice != 0">
							<view class="text-tabel-cell-bottom">
								<text class="QS-text mini-xxx color_ffffff">￥</text>
								<text class="QS-text large color_ffffff">{{item.paySalePrice || 0}}</text>
							</view>
						</view>
						<view class="flex_row_c_c" v-else>
							<dyc-icons type="integral" fontSize="20rpx" color="#ffffff"></dyc-icons>
							<QS-P width="15rpx"></QS-P>
							<text class="QS-text large color_ffffff">{{item.integratePrice || 0}}</text>
						</view>
					</view>
					<view class="right">
						<block v-if="item.integratePrice != 0 && item.paySalePrice != 0">
							<dyc-icons type="integral" fontSize="20rpx" color="#000000"></dyc-icons>
							<QS-P width="15rpx"></QS-P>
							<text class="QS-text large">{{item.integratePrice || 0}}</text>
						</block>
						<block v-else>
							<text class="QS-text large">马上抢</text>
						</block>
					</view>
				</view>
				<!-- <view class="flex_row_none_c">
					<view class="text-tabel-cell-bottom">
						<text class="QS-text mini-xxx">￥</text>
						<text class="QS-text large">{{item.paySalePrice || 0}}{{item.integratePrice?`+${item.integratePrice}积分`:''}}</text>
					</view>
					<QS-P width="15rpx"></QS-P>
					<text
						class="QS-text mini-xxx color_BBBBBB text-decoration_line-through">￥{{item.payPrice || 0}}</text>
					<QS-P width="20rpx"></QS-P>
					
				</view>
				<QS-P height="24rpx"></QS-P>
				<view class="flex_row_c_c border-radius-px_60"
					style="height: 60rpx; width: 290rpx;background-color: #F52F50;">
					<text class="QS-text mini color_ffffff">马上抢</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			listItem: {
				type: [Object, String, Number, Array],
				default: () => {
					return {}
				}
			},
			type: {
				type: String,
				default: ''
			},
			thumbnailName: {
				type: String,
				default: 'goodsThumbnail'
			},
			saleCountName: {
				type: String,
				default: 'saleCount'
			},
			titleName: {
				type: String,
				default: 'goodsName'
			},
			salePriceName: {
				type: String,
				default: 'salePrice'
			},
			priceName: {
				type: String,
				default: 'price'
			},
			salePriceRightText: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				imgShow: false,
				filterPriceAndIntegrateConfig: {
					hasPreIcon: false
				}
			}
		},
		computed: {
			item() {
				return this.listItem;
			}
		},
		methods: {
			imageLoaded(e) {
				this.$emit('imgLoaded')
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		/* #ifndef APP-NVUE */
		width: 100%;
		display: flex;
		/* #endif */
		flex-direction: column;
		border-radius: 10rpx;
		overflow: hidden;
		// padding: 15rpx;
		background-color: #fff;
	}

	.list-item {
		width: 100%;
		border: 1px solid #F2F2F2;
		border-radius: 10rpx;
		overflow: hidden;
		// margin-bottom: 20rpx;
		// margin-right: 20rpx;
	
		&:nth-child(2n) {
			margin-right: 0;
		}
	
		.img-box {
			position: relative;
			width: 100%;
			padding-top: 100%;
			// height: 100%;
	
			.image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: #B7E9FF;
			}
	
			.topRightBox {
				position: absolute;
				top: 0;
				right: 0;
				padding: 8rpx 14rpx;
				border-bottom-left-radius: 8rpx;
				border-top-right-radius: 8rpx;
				background-color: rgba(0, 0, 0, .15);
			}
		}
	
		.bot-box {
			padding: 12px 26rpx 32rpx;
			overflow: hidden;
		
			.name {
				// width: 100%;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}
	
	.bot-btns-box {
		height: 60rpx;
		width: 100%;
		border-radius: 100px;
		overflow: hidden;
		display: flex;
		flex-direction: row;
	
		.left {
			flex: 8;
			background-color: #F52F50;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			border-radius: 100px 0 0 100px;
			position: relative;
	
			&::after {
				content: ' ';
				position: absolute;
				top: 0;
				right: 0;
				transform: translateX(100%);
				width: 0;
				height: 0;
				border-top: 60rpx solid #F52F50;
				border-right: 30rpx solid transparent;
			}
		}
	
		.right {
			flex: 10;
			background: linear-gradient(180deg, #FFED91 0%, #FFD365 100%);
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			border-radius: 0 100px 100px 0;
		}
	}
</style>
